div docAnalysisModal import docAnalysisModal from
'@/components/Public/editor/core/docAnalysisModal.vue'; docAnalysisModal

<template lang="pug">
  .content-wrap aButton(@click="show") 展示 aModal( v-model="visible",
  @ok="handleOK", :footer="null", bodyStyle="background-color: #F5F6FB" ) .title
  文档分析 .backgroundImage p.firstLine 欢迎查看你的文档分析！ p.lastLine
  继续加油呦~ img(src="@/assets/img/icon/trophy.png"
  style="position:relative;top:-35px;left:255px") .topBox #wrap(style="width:
  170px; height: 170px; margin: 0 auto; margin-bottom: 8px", ref="chart")
  div.scale(style="width:130px; height: 15px;") span 0% span(style="margin-left:
  75px") 100% div.yiduxing 易读性 .dashboardData p.yuedu 阅读时间：32秒钟
  p.langdu 朗读时间：2分钟 .middleBox .leftDashboardWrap .leftDashboard p
  正负情感 .rightDashboardWrap .rightDashboard p 情绪强度 .bottomBox
  p.wordsNumber 字数 span.number 212 .vertical-line p.sentencesNumber 句数
  span.number 12
</template>
<script>
  import Vue from "vue";
  import { Modal, Button } from "ant-design-vue-findsoft";
  import echarts from "echarts";

  export default Vue.extend({
    name: "docAnalysisModal",
    components: {
      aModal: Modal,
      aButton: Button,
    },
    data() {
      return {
        visible: false,
      };
    },
    methods: {
      show() {
        this.visible = true;
      },
      handleOK(e) {
        console.log(e);
        this.visible = false;
      },
    },
    beforeUpdate() {
      this.$nextTick(function () {
        const Value = 98;
        const StartAngle = 215;
        const EndAngle = -35;
        const PointerAngle =
          (StartAngle - EndAngle) * ((100 - Value) * 0.01) + EndAngle; // 当前指针（值）角度
        const mychart = echarts.init(this.$refs.chart);
        const option = {
          series: [
            {
              type: "gauge",
              radius: "90%",
              startAngle: PointerAngle,
              endAngle: EndAngle,
              splitNumber: 100,
              axisLine: {
                lineStyle: {
                  width: 15,
                  opacity: 1,
                  color: [
                    [20, "#DDECFC"],
                    [80, "#DDECFC"],
                    [100, "#DDECFC"],
                  ],
                },
              },
              title: { show: false },
              detail: { show: false },
              splitLine: { show: false },
              axisTick: {
                show: false,
              },
              axisLabel: { show: false },
              pointer: { show: false },
              itemStyle: {},
              data: [
                {
                  value: Value,
                  name: "完成率",
                },
              ],
            },
            {
              type: "gauge",
              radius: "90%",
              startAngle: StartAngle,
              endAngle: PointerAngle,
              splitNumber: 100,
              axisLine: {
                lineStyle: {
                  width: 15,
                  opacity: 1,
                  color: [
                    [20, "#59A4F3"],
                    [80, "#59A4F3"],
                    [100, "#59A4F3"],
                  ],
                },
              },
              title: { show: false },
              detail: {
                formatter: "{value}",
                offsetCenter: [0, "-15%"],
                fontSize: 30,
                color: "#59A4F3",
              },
              splitLine: { show: false },
              axisTick: {
                show: false,
              },
              axisLabel: { show: false },
              pointer: { show: false },
              itemStyle: {},
              data: [
                {
                  value: Value,
                  name: "完成率",
                },
              ],
            },
          ],
        };
        mychart.setOption(option);
      });
    },
  });
</script>
<style lang="stylus" scoped>
  .yiduxing
    position: absolute;
    top: 355px;
    left: 224px;
  .scale
    position: absolute;
    top: 385px;
    left: 180px;
  .content-wrap
    width: 1000px;
    height: 1000px;
    background: #F5F6FB;
  .title
    width: 72px;
    height: 25px;
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #110F26;
    line-height: 25px;
    margin-top: 32px;
    margin-left: 24px;
    margin-bottom: 24px;
  .backgroundImage
    width: 393px;
    height: 132px;
    background-color: #59A4F3;
    border-radius: 10px;
    margin-left: 24px;
  .firstLine
    display: inline-block;
    width: 180px;
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 22px;
    position: relative;
    top: 33px;
    right: 180px;
    bottom: 77px;
    left: 33px;
  .lastLine
    width: 84px;
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 20px;
    position: relative;
    top: 30px;
    right: 276px;
    bottom: 47px;
    left: 33px;
  .topBox
    width: 393px;
    height: 237px;
    background: #FDFDFE;
    box-shadow: 0px 2px 4px 0px #EDEFFB;
    border-radius: 10px;
    margin-top: 22px;
    margin-left: 24px;
  .dashboardData
    width: 100%;
    height: 43px;
  p.yuedu,p.langdu
    display: inline-block;
    width: 151px;
    height: 43px;
    background: rgba(89, 164, 243, 0.15);
    box-shadow: 0px 8px 10px 1px rgba(14, 8, 62, 0.05);
    border-radius: 6px;
    border: 0px solid #59A4F3;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #59A4F3;
    word-spacing: 0.1px;
    padding: 11px;
  p.yuedu
    margin-left: 32px;
    margin-bottom: 20px;
  p.langdu
    margin-left: 27px;
    margin-bottom: 20px;
  .middleBox
    width: 393px;
    height: 167px;
    background: #FDFDFE;
    box-shadow: 0px 2px 4px 0px #EDEFFB;
    border-radius: 10px;
    margin-top: 20px;
    margin-left: 24px;
    padding: 18px 38px 20px;
  .leftDashboardWrap
    display: inline-block;
    width: 140px;
    height: 129px;
  .rightDashboardWrap
    display: inline-block;
    width: 140px;
    height: 129px;
    margin-left: 37px;
  .leftDashboard,.rightDashboard
    width: 140px;
    height: 115px;
    background-color: red;
  .middleBox p
    width: 100%;
    height: 14px;
    line-height: 14px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(42, 46, 54, 0.6);
    text-align: center;
  .bottomBox
    width: 393px;
    height: 61px;
    background: #FDFDFE;
    box-shadow: 0px 2px 4px 0px #EDEFFB;
    border-radius: 10px;
    margin-top: 20px;
    margin-left: 24px;
  .bottomBox p
    display: inline-block;
  .wordsNumber,.sentencesNumber
    width: 130px;
    height: 25px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(42, 46, 54, 0.6);
    line-height: 17px;
  .wordsNumber
    margin-left: 62px;
    margin-top: 18px;
  .sentencesNumber
    margin-left: 61px;
    margin-top: 18px;
  .vertical-line
    display: inline-block;
    width: 1px;
    height: 28px;
    background: #D8D8D8;
    margin-top: 16px;
  span.number
    font-size: 24px;
    line-height: 17px;
    color: #2A2E36;
</style>
